<template>
  <div class="home">
    <el-carousel height="calc(100vh - 60px)">
      <el-carousel-item v-for="item in list" :key="item" :style="{ 'background-image': `url(${item})` }"
        class="carousel-item">
      </el-carousel-item>
    </el-carousel>
    <div class="title"> 互联网 + 科技</div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const list = [
  new URL('./images/1.png', import.meta.url).href,
  new URL('./images/2.png', import.meta.url).href,
  new URL('./images/3.png', import.meta.url).href
]
</script>
<style lang="less" scoped>
.home {
  position: relative;
  height: 100%;
  width: 100%;
}

.carousel-item {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  color: white;
  font-size: 56px;
  font-weight: bolder;
}
</style>